<div class="wrapper">
    <div class="order">
        <div class="goods-wrapper" v-for="(g,index) in order.goods">
            <div class="cont">
                <image class="goods-img" resize="cover" :src="g.img || defaultImg" @click="goToGoodsDetail(g)"></image>

                <div class="eva-box">
                    <div :class="['eva-item',g.grade=='1'?'eva-item-active':'']" @click="evaluateGoods(index,g,'1')">
                        <image resize="cover" class="face-img" :src="faceNiceIcon"></image>
                        <text :class="['face-text',g.grade=='1'?'face-text-active':'']">好评</text>
                    </div>

                    <div :class="['eva-item',g.grade=='0'?'eva-item-active':'']"  @click="evaluateGoods(index,g,'0')">
                        <image resize="cover" class="face-img" :src="faceNormalIcon"></image>
                        <text :class="['face-text',g.grade=='0'?'face-text-active':'']">中评</text>
                    </div>

                    <div :class="['eva-item',g.grade=='-1'?'eva-item-active':'']"  @click="evaluateGoods(index,g,'-1')">
                        <image resize="cover" class="face-img" :src="faceBadIcon"></image>
                        <text :class="['face-text',g.grade=='-1'?'face-text-active':'']">差评</text>
                    </div>
                </div>
            </div>

            <textarea v-model="g.remark" class="textarea font-msyhl" placeholder="多说点什么吧！你的评价是别人的指导方针哦～"></textarea>
        </div>
    </div>

    <div class="evaluate">
        <text class="evaluate-title font-msyhl">给店铺评分</text>

        <div class="evaluate-box">
            <div class="evaluate-item">
                <text class="evaluate-text font-msyhl">描述相符</text>

                <div class="star-box">
                    <div class="star" @click="evaluateOrderDesStars(1)">
                        <image resize="cover" v-if="orderDesStars <= 0" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderDesStars > 0"  class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderDesStars(2)">
                        <image resize="cover" v-if="orderDesStars <= 1" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderDesStars > 1" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderDesStars(3)">
                        <image resize="cover" v-if="orderDesStars <= 2" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderDesStars > 2" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderDesStars(4)">
                        <image resize="cover" v-if="orderDesStars <= 3" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderDesStars > 3" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderDesStars(5)">
                        <image resize="cover" v-if="orderDesStars <= 4" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderDesStars > 4" class="star-img" :src="starActiveIcon"></image>
                    </div>
                </div>
            </div>

            <div class="evaluate-item">
                <text class="evaluate-text font-msyhl">发货速度</text>

                <div class="star-box">
                    <div class="star" @click="evaluateOrderSpeedStars(1)">
                        <image resize="cover" v-if="orderSpeedStars <= 0" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderSpeedStars > 0" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderSpeedStars(2)">
                        <image resize="cover" v-if="orderSpeedStars <= 1" class="star-img" :src="starIcon"></image>
                        <image resize="cover"  v-if="orderSpeedStars > 1" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderSpeedStars(3)">
                        <image resize="cover" v-if="orderSpeedStars <= 2" class="star-img" :src="starIcon"></image>
                        <image resize="cover"  v-if="orderSpeedStars > 2" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderSpeedStars(4)">
                        <image resize="cover" v-if="orderSpeedStars <= 3" class="star-img" :src="starIcon"></image>
                        <image resize="cover"  v-if="orderSpeedStars > 3" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderSpeedStars(5)">
                        <image resize="cover" v-if="orderSpeedStars <= 4" class="star-img" :src="starIcon"></image>
                        <image resize="cover"  v-if="orderSpeedStars > 4" class="star-img" :src="starActiveIcon"></image>
                    </div>
                </div>
            </div>

            <div class="evaluate-item">
                <text class="evaluate-text font-msyhl">服务态度</text>

                <div class="star-box">
                    <div class="star" @click="evaluateOrderAttitudeStars(1)">
                        <image resize="cover" v-if="orderAttitudeStars <= 0" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderAttitudeStars > 0" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderAttitudeStars(2)">
                        <image resize="cover" v-if="orderAttitudeStars <= 1" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderAttitudeStars > 1" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderAttitudeStars(3)">
                        <image resize="cover" v-if="orderAttitudeStars <= 2" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderAttitudeStars > 2" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderAttitudeStars(4)">
                        <image resize="cover" v-if="orderAttitudeStars <= 3" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderAttitudeStars > 3" class="star-img" :src="starActiveIcon"></image>
                    </div>

                    <div class="star" @click="evaluateOrderAttitudeStars(5)">
                        <image resize="cover" v-if="orderAttitudeStars <= 4" class="star-img" :src="starIcon"></image>
                        <image resize="cover" v-if="orderAttitudeStars > 4" class="star-img" :src="starActiveIcon"></image>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sub-box">
        <text class="sub-btn font-msyhl" @click="subEvaluate">发表评价</text>
    </div>
</div>